import {View, Text, Image, RichText} from '@tarojs/components';
import { Popup, Button } from "@taroify/core";
import { ChatMessage, ConservationDetail } from "@/types/conservationType";
import { Phone, Close } from "@taroify/icons";
import { useState } from "react";
import {marked} from "marked";

export default function Index(props: { conservation: ConservationDetail, onSend: (message: ChatMessage) => void }) {
  const { conservation } = props;
  const [popupVisible, setPopupVisible] = useState(false); // 控制弹窗显示
  // 打开弹窗
  const openPopup = () => {
    setPopupVisible(true);
  };

  // 关闭弹窗
  const closePopup = () => {
    setPopupVisible(false);
  };

  const showResponse = () => {
    let res = '';
    const chat_length = conservation.chat_history.length;
    if(chat_length >= 2 && conservation.chat_history[chat_length-1].role === 'system') {
      conservation.chat_history[chat_length-1].contents.forEach((item) => {
        if(item.type === 'text') res += item.content;
      })
    }

    return res;
  }

  return (
    <View style={{ height: '100%', width: '100%', overflowY: "auto"}}>
      {/* 字幕按钮 */}
      <View style={{ display: 'flex', justifyContent: 'flex-end', padding: '20rpx' }}>
        <Button
          variant='text'
          style={{ backgroundColor: '#f0f0f0', borderRadius: '20rpx', padding: '10rpx 20rpx' }}
          onClick={openPopup} // 点击打开弹窗
        >
          <Text style={{ fontSize: '28rpx', color: '#333' }}>字幕</Text>
        </Button>
      </View>

      {/* 弹窗 */}
      <Popup
        open={popupVisible} // 控制弹窗显示
        onClose={closePopup} // 监听关闭事件
        placement='bottom'
        style={{ height: '50vh', backgroundColor: '#fff', borderRadius: '20rpx 20rpx 0 0' }}
      >
        <View style={{ padding: '20rpx' }}>
          <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20rpx' }}>
            <Text style={{ fontSize: '32rpx', fontWeight: 'bold' }}>字幕</Text>
            <Close size='20' onClick={closePopup} /> {/* 点击关闭按钮关闭弹窗 */}
          </View>
          <View style={{ height: '40vh', overflowY: 'auto' }}>
            <RichText nodes={marked(showResponse())} style={{fontSize: '30rpx !important', color: '#666'}} />
          </View>
        </View>
      </Popup>

      {/* 头像 */}
      <View style={{ padding: '40rpx', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <Image
          src={`${process.env.TARO_APP_BASE_URL}${conservation?.agent.cover_image}`}
          style={{ width: '300rpx', height: '300rpx', objectFit: 'cover', borderRadius: '50%', boxShadow: '0 4rpx 20rpx rgba(0, 0, 0, 0.1)' }}
        />
      </View>

      {/* 电话按钮 */}
      <View style={{ display: 'flex', justifyContent: 'center', marginTop: '160rpx' }}>
        <Button
          variant='contained'
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: '50%',
            width: '120rpx',
            height: '120rpx',
            backgroundColor: '#007bff',
            boxShadow: '0 4rpx 20rpx rgba(0, 123, 255, 0.3)',
          }}
        >
          <Phone size='45' style={{ color: '#fff' }} />
        </Button>
      </View>
    </View>
  );
}
